<template>
     <el-form :inline="true" :model="form" label-width="auto" style="padding: 10px;">
        <el-form-item label="编码">
                  <el-input v-model="form.code" :disabled="action!='add'"/>
                </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
<!--       <el-form-item label="类别">-->
<!--         <el-input v-model="form.category"/>-->
<!--       </el-form-item>-->
       <div>
       <el-form-item label="超时离线">
         <el-switch v-model="form.timeoutEnable" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"/>
       </el-form-item>
       <el-form-item label="超时(秒)" v-if="form.timeoutEnable">
         <el-input v-model="form.timeoutSecond"/>
       </el-form-item>
       </div>
       <div>
       <el-form-item label="自动注册终端">
         <el-switch v-model="form.regiTerminal" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc"/>
       </el-form-item>
       </div>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" style="width: 600px;"/>
        </el-form-item>


       <el-form-item label="类别">
         <el-select v-model="form.driverType" placeholder="请驱动类别" size>
           <el-option v-for="item in dict.driver" :label="item.label" :value="item.value" :key="item.value"/>
         </el-select>
       </el-form-item>

       <template v-if="form.driverType=='MQTT'">
         <el-form-item label="订阅主题" >
           <el-input v-model="form.params.subTopic"  style="width: 700px;"/>
         </el-form-item>
       </template>
       <template v-else-if="form.driverType=='TCP'">
         <el-form-item label="端口号">
           <el-input v-model="form.params.port"/>
         </el-form-item>
       </template>
       <template v-else-if="form.driverType=='MQTT_CLIENT'">
         <el-select v-model="form.params.mqttVersion" placeholder="版本" size>
           <el-option v-for="item in dict.mqttVersion" :label="item.label" :value="item.value" :key="item.value"/>
         </el-select>
         <el-form-item label="主机">
           <el-input v-model="form.params.host"/>
         </el-form-item>
         <el-form-item label="端口号">
           <el-input v-model="form.params.port"/>
         </el-form-item>
         <el-form-item label="用户名">
           <el-input v-model="form.params.username"/>
         </el-form-item>
         <el-form-item label="密码">
           <el-input v-model="form.params.password"/>
         </el-form-item>
         <el-form-item label="ClientId">
           <el-input v-model="form.params.clientId"/>
         </el-form-item>
         <el-form-item label="订阅主题" >
           <el-input v-model="form.params.subTopic"  style="width: 700px;"/>
         </el-form-item>
       </template>
       <el-form-item label="驱动逻辑">
         <cmeditor ref="codeEditor" v-model="form.driverClass" :width="700"></cmeditor>
       </el-form-item>

       MQTT_CLIENT

       <div style="padding: 10px;">
         <label>状态：</label>
         <el-text v-if="form.online" type="success">在线</el-text>
         <el-text v-else type="danger">离线</el-text>
       </div>
        <div style="padding: 10px;">
          <label>最后上报时间：<el-text>{{format(form.lastReportTime)}}</el-text></label>
        </div>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handleAdd">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit} from '/http/gateway.js'
    import Dwin from "../../component/dwin.vue";
    import {useDict} from '/http/options.js'
    import WeekPlan from "../../component/weekPlan.vue";
    import cmeditor from "../../component/cmeditor.vue";

    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
      components: {cmeditor, Dwin,WeekPlan},
        props:{
          initParams:Object
        },
        setup(props,context){
          const dict = ref({});
          useDict(dict,'fluxData,storePolicy,alarmPolicy,driver,mqttVersion');
            const form=reactive({
              code:'',
              name:'',
              timeoutEnable:true,
              timeoutSecond:300,
              category:'',
              remark:'',
              signalList:[],
              lastReportTime:0,

              driverType:'MQTT',

              driverClass:'',
              regiTerminal:true,
              params:{
                subTopic:'',
                port:8888,
                host:'localhost',
                username:'',
                password:'',
                clientId:'',
                mqttVersion:'MQTT_3_1'
              }
            })
          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');
          const dialog = ref(null);


          const handleClose1 = (data)=>{
            data.forEach(item=>{
              form.signalList.push(item);
            })

          }



          function onSelectSignal(){
            dialog.value.open(form.signalList);
          }


          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
            }else{
              action.value= 'add'
            }
          })

          const format = (ts)=>{
            // if(ts.length>10){
            //   ts = Math.ceil(ts/1000);
            // }
            // console.log("111",moment())
            // console.log("222",moment(ts))
            return moment(parseInt(ts)).format('YYYY-MM-DD HH:mm:ss')
          }



          return{
            form,handleAdd,handleCancel,action,dialog,onSelectSignal,handleClose1,dict,format
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>